<template>
  <div class="container">
    <div class="content">
      <div class="title">店铺经营配置</div>
      <div class="body">
        <div>
          <span class="name">店铺类型：</span>
          <span class="value">{{ shopBusinessConfig.shopCategoryName }}</span>
        </div>
        <div>
          <span class="name">门店位置：</span>
          <div class="value">
            <span class="address"
              >{{ (shopBusinessConfig.provinceName ?? '') + (shopBusinessConfig.cityName ?? '') + (shopBusinessConfig.districtName ?? '') }}
              {{ shopBusinessConfig.addressDescribe }}
              <el-tag type="success" round style="font-weight: bold"> 半径{{ shopBusinessConfig.businessScope }}km </el-tag></span
            >
            <BMap :zoom="12" height="300px" width="600px" :center="{ lat: shopBusinessConfig.latitude, lng: shopBusinessConfig.longitude }">
              <template v-if="shopBusinessConfig.latitude && shopBusinessConfig.longitude && shopBusinessConfig.businessScope">
                <BZoom :offset="{ x: 20, y: 20 }" />
                <BCircle
                  stroke-style="solid"
                  strokeColor="#00f700"
                  fillColor="#00f700"
                  :fillOpacity="0.3"
                  :strokeWeight="1.5"
                  :center="{ lat: shopBusinessConfig.latitude, lng: shopBusinessConfig.longitude }"
                  :radius="shopBusinessConfig.businessScope * 1000"
                />
              </template>
            </BMap>
          </div>
        </div>
        <div>
          <span class="name">经营类型：</span>
          <span class="value" style="font-weight: bold">
            <template v-for="(typeValue, index) in shopBusinessConfig.businessType?.split(',')" :key="index"
              ><el-tag type="warning">{{ receivingMethodTypeLabelOf(parseInt(typeValue)) }}</el-tag> &nbsp;</template
            >
          </span>
        </div>
        <div>
          <span class="name">配送方式：</span>
          <span class="value">{{ deliveryMethodTypeLabelOf(shopBusinessConfig.deliveryMethod) }}</span>
        </div>
        <div>
          <span class="name">最低起送：</span>
          <span class="value">￥{{ shopBusinessConfig.minimumDeliveryAmount }}</span>
        </div>
        <div>
          <span class="name">餐盒费用：</span>
          <span class="value">￥{{ shopBusinessConfig.packingFee }}</span>
        </div>
        <div>
          <span class="name">区域配送所需时间：</span>
          <span class="value">{{ shopBusinessConfig.deliveryTimePerKm }}分钟/km</span>
        </div>
        <div>
          <span class="name">制作餐食所需时间：</span>
          <span class="value">{{ shopBusinessConfig.deliveryFee }}分钟</span>
        </div>
        <div>
          <span class="name">允许提前预定的天数：</span>
          <span class="value">{{ shopBusinessConfig.advanceBookingDays }}天</span>
        </div>
        <div>
          <span class="name">
            <span>固定向用户收取的配送费用&nbsp;</span>
            <el-tooltip class="box-item" effect="dark" content="由商家自行设置并负责（商家需承担多出部分）" placement="top-start">
              <svgIcon name="heed"></svgIcon> </el-tooltip
            >：
          </span>
          <span class="value">￥{{ shopBusinessConfig.deliveryFee }}</span>
        </div>
      </div>
    </div>
    <floating-button size="50px" @click="toEdit">
      <SvgIcon name="edit" size="50%"></SvgIcon>
    </floating-button>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from 'vue'
import ComponentHat from '@/plugins/type'
import { ShopBasicInfo, ShopBusinessConfigVO } from '@/types/response/shop'
import FloatingButton from '@/components/floating-button/index.vue'
import { receivingMethodTypeLabelOf } from '@/enums/ReceivingMethodType'
import { deliveryMethodTypeLabelOf } from '@/enums/DeliveryMethodType'
import router from '@/router'
import { transformGCJ02ToBD09 } from '@/utils/coordinateConvert'
const { $API, $modal } = <ComponentHat>getCurrentInstance().proxy
const shopBusinessConfig = ref(new ShopBusinessConfigVO())
onMounted(async () => {
  const result = await $API.shop.shopBusinessConfig()
  if (!result.success) {
    $modal.msgError('无法获取店铺经营配置信息')
    return
  }
  const rawData = result.data
  // 后端用的是GCJ02需要转为BD09
  const targetGEO = transformGCJ02ToBD09(rawData.longitude, rawData.latitude)
  rawData.longitude = targetGEO[0]
  rawData.latitude = targetGEO[1]
  // 赋值渲染
  shopBusinessConfig.value = result.data
  console.log(rawData.longitude + ',' + rawData.latitude)
})

// 去修改基本信息
function toEdit() {
  router.push({ path: '/business-config/update' })
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    overflow: auto;
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      padding: 0 0 40px;
      font-size: 18px;
      font-weight: bold;
    }

    .body {
      > div {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;

        .name {
          display: flex;
          align-items: center;
          margin-right: 20px;
          font-size: 16px;
        }

        .value {
          flex-grow: 1;

          .flag {
            margin-right: 10px;
          }

          .address {
            display: inline-block;
            margin-bottom: 15px;
          }
        }

        .logo {
          overflow: hidden;
          width: 50px;
          height: 50px;
          border-radius: 5%;
        }

        .bg-poster {
          height: 100px;
        }
      }
    }
  }
}
</style>
